<template>
  <div  class="table-search-page">
    <a-card :bodyStyle="tstyle" :bordered="false">
      <div class="table-page-search-wrapper" >
        <a-row :gutter="12" >
          <a-col :md="6" :sm="24">
            <a-form layout="inline" :form="form" :selfUpdate="true">
              <a-form-item label="客户卡号" >
                <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20"  v-decorator="['cardNo']" allow-clear placeholder="请输入客户卡号"/>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form layout="inline" :form="form">
              <a-form-item label="绑定人">
                  <a-select
                    :showSearch="true"
                    option-filter-prop="children"
                    option-label-prop="label"
                    allow-clear
                    placeholder="选择绑定人，可搜索"
                    v-decorator="['consultManId']"         
                  >
                <a-select-option v-for="item in sysUserArr" :key="item.userid" :label="item.name" :value="item.userid">
                  {{ item.name }}
                </a-select-option>
              </a-select>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button style="margin-bottom: 4px;" type="primary" @click="clickSearch" >查询</a-button>
            <a-button style="margin-bottom: 4px;margin-left: 10px;" @click="clickReset" >重置</a-button>
          </a-col>
        </a-row>
      </div>

    </a-card>

    <a-card :bordered="false">
      <super-table
        :scroll="{ x: 800 }"
        style="margin: 0px -15px"
        ref="table"
        ls_props_columns="table"
        :bordered="false"
        :pagination="pagination"
        size="small"
        :columns="columns"
        :data="loadListData"
        :rowKey="(record, index) => index"
      >
        <!--序号-->
        <template slot="index" slot-scope="text, record, index">
          <span>{{ (queryParam.pageNum - 1) * queryParam.pageSize + (index + 1) }}</span>
        </template>
         <!-- 姓名 -->
        <template slot="sex" slot-scope="text,record">
            <div style="display:flex;flex-direction:row;align-items: center;justify-content: center;">
                <img v-if="record.sex == '女'" src="../../assets/wan_sex_w.png" style="width:14px;height:14px" alt="">
                <img v-if="record.sex == '男'" src="../../assets/wan_sex_m.png" style="width:14px;height:14px" alt="">
                <span>{{record.name}}</span>
            </div>
        </template>
        <!--客户卡号-->
        <!-- @click="toDetails(text, record)"  record-->
        <template slot="cardNo" slot-scope="text">  
            <a class=" g-f-14"  >{{ text }}</a>
            <a-tooltip placement="top">
                <template slot="title"> 复制 </template>
                <a-icon type="copy" @click="ConCopy(text)" theme="twoTone" two-tone-color="#3399ff" style="margin-left: 10px;cursor: pointer;" />
            </a-tooltip>
        </template>

         <template slot="action" slot-scope="text,record">
            <a-popconfirm title="确定解绑吗?" @confirm="() =>unBind(record)">
              <a-button class="g-bt-pad-0" type="link" >解绑</a-button>
            </a-popconfirm>
          </template>
      </super-table>
    </a-card>
  </div>
</template>

<script>

import { SuperTable } from '@/components'
import { customerList,customerSearch } from '@/api/modular/main/customer/customerManage'
import { getZXS} from '@/api/modular/main/customer/customerTriage'
import { UnbindCustomer,SelectList } from '@/api/weixin'
import {removePropertyOfNull} from '@/utils/util.js'
import moment from 'moment'
export default {
  components: {
    SuperTable,
  },
  data() {
    return {
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      loadListData: (parameter) => {
        // console.log('parameter',parameter)
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        this.queryParam=removePropertyOfNull({...this.queryParam,...parameter})
        return SelectList(this.queryParam).then((res) => {
            return res
        })  
      },
      columns: [
        { title: '序号', align:'center', scopedSlots: { customRender: 'index' }, width: 50,},
        { title: '姓名', align:'center', dataIndex: 'name',  scopedSlots:{ customRender:'sex'}},
        { title: '卡号',align:'center', dataIndex: 'cardNo', scopedSlots:{ customRender:"cardNo"  },  },
        { title: '咨询师',align:'center', dataIndex: 'consultManName',  },
        { title: '开发人',align:'center', dataIndex: 'developer',  },
        { title: '绑定日期',align:'center', dataIndex: 'createTime',  },
        { title: '绑定人企业微信',align:'center', dataIndex: 'staffName',  },
        { title: '绑定人员工编号',align:'center', dataIndex: 'staffCrmId',  },
        { title: '操作',scopedSlots: { customRender: 'action' } , width: 110, fixed:'right'},
      ],
      data: [],
      form:this.$form.createForm(this),
      // 查询参数
      queryParam: {
        pageNum: 1, //第几页
        pageSize: 20, //每页中显示数据的条数
      },
      pagination: {
        pageNum:1,
        pageSize:20,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字 
      },
      loading: false, //加载状态
      sysUserArr:[]
    }
  },
 
  activated(){
     this.$refs.table.refresh()
    //  this.toDetails()
  },
  created() {
    this.init()
  },
  methods: {
    init(){
        getZXS().then(res=>{
            this.sysUserArr = res.userList
       
        })
    },
    clearSpace(e){
       e.target.value=e.target.value.replace(/\s+/g,'')
    },
   
    //点击查询
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      this.queryParam = form_values
      this.$refs.table.refresh(true)
    },

    unBind(value){
        UnbindCustomer(value.id).then(res=>{
            // console.log("res",res)
            if(res.code == 200){
              this.$message.success("解绑成功")
              this.$refs.table.refresh()
            }
        })
    },
    clickReset() {
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
    },

      //点击查看客户详情
    toDetails(text, tags, i = 0) {
      console.log("allRouter",this.$router)
 

      // this.$router.push({
      //   path: 'customer_details',
      //   query: {
      //     id: tags.customerId,
      //     card_no: tags.cardNo,
      //   },
      // })
    },
  },
}
</script>

<style lang="less" scoped>
  .a{
    
  }
 
</style>